<template>
    <div class="wrapper">
        <div ref="editorRef" style="height: 100%; width: 100%; background-color: #f8f8f8;"></div>
        <Icon class="full_icon" name="el-icon-FullScreen" @click="onFullScreen" size="18" />
    </div>
</template>
<script setup>
import { ref, nextTick, onMounted, onBeforeUnmount } from 'vue'
import screenfull from 'screenfull'
const emit = defineEmits(['valueChange'])
const props = defineProps({
    editable: { type: Boolean, default: true },
    language: { type: String, default: "javascript" },
    value: { type: String, default: "" },
    isRun: { type: Boolean, default: false },
})


let editor
const editorRef = ref(null)
const initEditor = () => {
    monaco.editor.defineTheme('myTheme', {
        base: 'vs',
        inherit: true,
        rules: [{ background: 'f8f8f8' }],
        colors: {
            'editor.foreground': '#000000',
            'editor.background': '#f8f8f8',
            'editorCursor.foreground': '#8B0000',
            'editor.lineHighlightBackground': '#f5f5f5',
            'editorLineNumber.foreground': '#008800',
            'editor.selectionBackground': '#88000030',
            'editor.inactiveSelectionBackground': '#88000015',
        },
    })
    monaco.editor.setTheme('myTheme')
    editor = monaco.editor.create(editorRef.value, {
        value: '', //编辑器初始显示文字
        language: props.language, //语言支持自行查阅demo
        automaticLayout: true, //自动布局
        // theme: 'vs', //官方自带三种主题vs, hc-black, or vs-dark
        foldingStrategy: 'indentation', // 代码可分小段折叠
        overviewRulerBorder: false, // 不要滚动条的边框
        scrollbar: {
            // Subtle shadows to the left & top. Defaults to true.
            useShadows: false,

            // Render vertical arrows. Defaults to false.
            verticalHasArrows: false,
            // Render horizontal arrows. Defaults to false.
            horizontalHasArrows: false,

            // Render vertical scrollbar.
            // Accepted values: 'auto', 'visible', 'hidden'.
            // Defaults to 'auto'
            vertical: 'auto',
            // Render horizontal scrollbar.
            // Accepted values: 'auto', 'visible', 'hidden'.
            // Defaults to 'auto'
            horizontal: 'auto',

            verticalScrollbarSize: 10,
            horizontalScrollbarSize: 10,
            arrowSize: 10,
            //小地图
            minimap: {
                enabled: false,
            },
        },
        autoIndent: true, // 自动布局
        tabSize: 4, // tab缩进长度
        autoClosingOvertype: 'always',
        roundedSelection: false,
        formatOnPaste: true
    });
    editor.setValue(props.value)
    editor.onDidBlurEditorText((event) => {
        const newValue = editor.getValue();
        emit('valueChange', newValue)
    })

    // editor.onDidContentSizeChange(() => {
    //     editor.getAction('editor.action.formatDocument').run()
    // })
}
const onFullScreen = () => {
    screenfull.toggle(editorRef.value)
    screenfull.onchange(() => {
        state.isFullScreen = screenfull.isFullscreen
    })
}




onMounted(async () => {
    await nextTick()
    initEditor()

})
onBeforeUnmount(() => {
    editor && editor.dispose()
})

defineExpose({
    setValue(value) {
        editor.setValue(value)
    },
    getValue() {
        return editor.getValue()
    }
})
</script>
<style lang="less" scoped>
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    &:hover {
        .full_icon {
            animation: twinkle 0.3s ease-in-out;
            visibility: visible;
        }
    }

    .full_icon {
        position: absolute;
        bottom: 10px;
        right: 10px;
        cursor: pointer;
        visibility: hidden;
        z-index: 100;
    }
}
</style>